<template>
    <div class="easyd-weixin-Box">

        <div class="app_list_box">
            <div class="app_box_content" @click="communicationManage()">
                <div class="app_box_content_left">
                    传播页管理
                </div>
                <div class="app_box_content_right">
                    <span class="fa fa-angle-right fa-lg C2"></span>
                </div>
            </div>
            <div class="top_menu app_box_content">
                <div class="app_box_content_right" @click="todayReading(0)">
                    今日阅读数（{{communicationInfo.todayBrowseCount}}）
                </div>
                <div class="app_box_content_right" @click="todayReading(1)">
                    总阅读人数（{{communicationInfo.totalBrowseCount}}）
                </div>
            </div>
        </div>

        <div class="app_page">
            <div class="communication_list app_box_content_list app_list_box MARGIN_BOTTOM_10"
                 v-for="item in communicationInfo.propagationInfo">
                <img :src="item.mc_title_image"/>
                <div class="communication_info">
                    <div class="app_box_flex">
                        <div class="app_box_content_left">
                            {{item.mc_title}}
                        </div>
                    </div>
                    <div class="app_box_flex C4 T3">
                        <div class="app_box_flex_1">
                            阅读：{{item.browseCount}}次
                        </div>
                        <div class="app_box_flex_1" style="text-align: center;">
                            分享：{{item.shareCount}}次
                        </div>
                        <div class="app_box_flex_1" style="text-align: right;">
                            成交：{{item.buyCount}}次
                        </div>
                    </div>
                </div>
                <div class="communication_time C4 T3">
                    <span class="app_float_left">{{$common.dateFormat("YYYY/MM/dd",item.mc_create_time)}}</span>
                    <div class="app_float_right" @click="shareThisCommunication(item)">
                        进入分享页
                    </div>
                </div>
            </div>
        </div>

    </div>
</template>

<script>
    import {mapState, mapMutations} from "vuex";

    export default {

        data() {
            return {};
        },
        computed: {
            ...mapState({
                communicationInfo: state => state.CommunicationListModule.communicationInfo
            })
        },
        mounted() {
            this.initData();
        },
        methods: {

            initData() {

                this.$easyUtil.startLoading(this);
                this.$http.getHttp(
                    this.$API.communicationRelatedPropagationList + "/u_id/" + this.$userData.getUID() + "/u_type/" + this.$userData.getOsType() + "/u_is_manager/" + this.$userData.getIsManager(),
                    rs => {
                        this.$easyUtil.endLoading(this);
                        this.$store.commit("CommunicationListModule/updateCommunicationInfo", rs);

                    });
            },
            //传播页管理
            communicationManage(e) {
                this.$router.push({
                    path: '/communicationManage'
                })
            },
            //今日阅读
            todayReading(type) {
                this.$router.push({
                    path: '/todayReading',
                    query: {
                        readType: type
                    }
                })
            },

            shareThisCommunication(item) {
                location.href = "http://manage.hxzbi.com/#/" + item.mc_url + "?shopId=" + item.mc_apid + "&id=" + this.$userData.getUID() + "&os_id=" + this.$userData.getOsid() + "&mediaId=" + item.mc_id + "&phones=" + localStorage.getItem('u_phone');
            }
        }
    };
</script>

<style lang="stylus" scoped>
    @import '~PUBLIC_CSS';
    .top_menu {
    }

    .top_menu .app_box_content_right {
        text-align: center;
        border-right: 2px solid #f6f6f6;
        font-size: small;
        padding: 0;
    }

    .top_menu .app_box_content_right:last-child {
        border-right: 0;
    }

    .communication_list {
        overflow: hidden;
    }

    .communication_list .communication_info {
        float: initial;
    }

    .communication_list .communication_time {
        overflow: hidden;
        width: 100%;
    }

    .communication_list .communication_time .app_float_right {
        border: 1px solid #fbd415;
        padding: 0 10px;
        line-height: initial;
        border-radius: 4px;
        margin-top: 5px;
    }

    .communication_list img {
        display: block;
        height: 50px;
        width: 70px;
        padding: 5px 10px 5px 0;
        float: left;
        object-fit: cover;
    }
</style>